<template>
    <div class="order-delivery">
        <!-- 配送管理 -->
        <!-- tab -->
        <el-tabs v-model="tabActiveName">
            <el-tab-pane
                v-for="{ name, label } in detailTabs"
                :key="name"
                :label="label"
                :name="name"
                :disabled="name === 'local'"></el-tab-pane>
        </el-tabs>
        <component :is="componentId" :key="tabActiveName"></component>
    </div>
</template>

<script setup name="orderDelivery">
import { ref, computed, defineAsyncComponent, onDeactivated, onMounted, onUnmounted, onActivated } from 'vue';
import { setLayout, resetLayout } from '@/hooks/layout';

const detailTabs = [
    { name: 'fast', label: '快递发货' },
    // { name: 'local', label: '同城配送' },
    { name: 'door', label: '上门自提' }
];
let tabActiveName = ref('fast');
const componentId = computed(() => {
    const defineAsyncComponents = {
        fast: defineAsyncComponent(() => import('./fast/index.vue')),
        local: defineAsyncComponent(() => import('./local/index.vue')),
        door: defineAsyncComponent(() => import('./door/index.vue'))
    };
    return defineAsyncComponents[tabActiveName.value] || null;
});

onMounted(() => {
    setLayout('custom-delivery-layout');
});
onUnmounted(() => {
    // tabActiveName.value = 'fast';
    resetLayout('custom-delivery-layout');
});
onActivated(() => {
    setLayout('custom-delivery-layout');
});
onDeactivated(() => {
    // tabActiveName.value = 'fast';
    resetLayout('custom-delivery-layout');
});
</script>

<style lang="scss">
.custom-delivery-layout {
    height: 100%;
    padding: 0 !important;
    background-color: unset !important;
    .order-delivery {
        height: 100%;
    }
}
</style>
<style lang="scss" scoped>
.order-delivery {
    :deep {
        .el-tabs {
            background-color: #fff;
            padding: 0 24px;
            --el-tabs-header-height: 60px;
        }
        .el-tabs__item {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #35383a;
            &.is-active {
                color: #ff6b00;
            }
        }
        .el-tabs__nav-wrap::after {
            height: 1px;
        }
    }
}
</style>
